﻿$.fn.split = function (direction, callback) {
    if (!direction) {
        direction = 'h';//h水平,v:垂直.
    }
    var len = $('.kui-sep-container').length;
    var sepContainer = null;
    if (len == 0) {
        sepContainer = $('<div class="kui-sep-container" style="position:fixed;left:0;top:0;margin:0;width:0;"></div>');//width:0:这样不会遮住内容
        //$("body").prepend(sepContainer);//要插到最前面,如果放在最后面,会遮住前面的内容,导致内容只能看见不能操作.
        $("body").append(sepContainer);
    }
    else {
        sepContainer = $('.kui-sep-container');
    }
    var target = $(this)[0];
    var sep = $(target.outerHTML).appendTo(sepContainer);
    $(sep).removeAttr('id');
    $(sep).css('cursor', 'ew-resize');
    $(sep).css('left', $(target).offset().left);
    $(sep).css('top', $(target).offset().top);
    $(sep).mousedown(function (event) {
        sep.isMouseDown = true;
        sep.startMousePoint = { x: event.pageX, y: event.pageY };
        sep.startPosition = { left: Math.round(parseFloat($(sep).css('left').split('px')[0])), top: Math.round(parseFloat($(sep).css('top').split('px')[0])) };
    });


    //$(sep).mousemove(function (event) { });//如果这样,鼠标移动很快时就会拖动不了,在IE和Firefox中可以调用setCapture和releaseCapture解决,但是在chrome中没有这样的方法.
    $(document).mousemove(function (event) {
        if (!sep.isMouseDown) {
            return;
        }
        if (direction == 'h') {
            $(sep).css('left', sep.startPosition.left + event.pageX - sep.startMousePoint.x);
        }
        else if (direction == 'v') {
            $(sep).css('top', sep.startPosition.top + event.pageY - sep.startMousePoint.y);
        }

        return false;//返回false阻止事件冒泡,否则移动过程中会复制文本

    });

    $(document).mouseup(function (event) {
        if (!sep.isMouseDown) {
            return;
        }
        sep.isMouseDown = false;
        if (direction == 'h') {
            $(sep).css('left', sep.startPosition.left + event.pageX - sep.startMousePoint.x);
            var leftAttr = $(target).attr('left');
            var _arr = leftAttr.split(':');
            if (_arr[0]) {
                $(_arr[0]).attr('rightAdd', parseInt($(_arr[0]).attr('rightAdd'), 10) + event.pageX - sep.startMousePoint.x);
            }
        }
        else if (direction == 'v') {
            $(sep).css('top', sep.startPosition.top + event.pageY - sep.startMousePoint.y);
            var topAttr = $(target).attr('top');
            var _arr = topAttr.split(':');
            if (_arr[0]) {
                $(_arr[0]).attr('bottomAdd', parseInt($(_arr[0]).attr('bottomAdd'), 10) + event.pageY - sep.startMousePoint.y);
            }
        }
        layout.layout($(target).parent());
        if (callback) {
            if (direction == 'h') {
                callback(event.pageX - sep.startMousePoint.x);
            }
            else if (direction == 'v') {
                {
                    callback(event.pageY - sep.startMousePoint.y);
                }
            }
            return false;//返回false阻止事件冒泡
        }
    });

    $(window).resize(function () {
        //$(sep).css('left', $(target).offset().left);
        //$(sep).css('top', $(target).offset().top);
        $(sep).css('height', $(target).height());
    });

    return sep;;
}

//实现自动调用
//由于要layout之后再split,所以放在layout中调用.